<script setup>
import { onBeforeMount, reactive, ref, toRefs } from 'vue';
import { getClusterListHandler as getListHandler, getClusterHandler as getCluster, deleteClusterHandler as deleteHandler } from '../../api/cluster.js';
import { ElMessage,ElMessageBox } from 'element-plus';
import Add from './Add.vue';
import { Close,Check } from '@element-plus/icons-vue'

const addUserDialog = ref(false)
const defaultMethod = ref("Create")
const data = reactive({
    items: [],
    clusterId: "",
    namespace: ""
})
// const loading = ref(true)

// 获取集群列表
const getList= () =>{
    // loading.value=true
    getListHandler().then((response)=>{
        console.log("response:", response.data.data.items)
        data.items=response.data.data.items
        // loading.value=false
    })
}

// 获取集群列表
const detail= () =>{
    // loading.value=true
    getCluster().then((response)=>{
        console.log("response:", response.data.data.items)
        data.items=response.data.data.items
        // loading.value=false
    })
}



// 删除集群
const deleteItem= (row) =>{
    console.log("当前行的数据：",row)
    ElMessageBox.confirm(
        '确定要删除：' + row.id,
        {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
    .then(() => {
        // loading.value=true
        deleteClusterHandler(row.id).then((response)=>{
        console.log("responseasdasdas:", response.data.data.items)
          ElMessage({
            message: response.data.message,
            type: 'success',
        })
        getList()
        })    
    })
    .catch(() => {
      return 
    })
}
const addCluster =()=>{
    data.userForm = {}
    defaultMethod.value="Create"
    addUserDialog.value=true
}
const editCluster =(row)=>{
    console.log("row: ",row)
    defaultMethod.value="Edit"
    addUserDialog.value=true
    data.userForm = row
}
onBeforeMount(()=>{
    getList()
})
const { items, userForm } = toRefs(data)
const closeDialog=()=>{
    getList()
}
const rollback=()=>{
    addUserDialog.value = false
    getList()
}
</script>

<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>集群列表</span>
                <el-button @click="Add()" class="button" type="primary">添加</el-button>
            </div>
        </template>
        <el-table 
            border 
            height="480" 
            :data="items" 
            style="width: 100%">
            <el-table-column  fixed prop="" align="center" label="集群ID" width="180">
                <template #default="scope">
                    <router-link v-if="scope.row.status == 'Active'" :to="{path: '/cluster/detail', query: {'id': scope.row.id }}">{{ scope.row.id }}</router-link>
                    <span v-else style="color: red">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column  prop="displayName" align="center" label="集群别名" width="180" />
            <el-table-column  prop="version" align="center" label="版本" width="100" sortable/>
            <el-table-column prop="" align="center" label="位置" width="180" >
                <template #default="scope">
                    {{ scope.row.city }} - {{ scope.row.district }}
                </template>
            </el-table-column>
            <el-table-column prop="" align="center" label="状态" width="80" sortable>
                <template #default="scope">
                    <el-icon v-if="scope.row.status == 'Active'" color="green"><Check /></el-icon>
                    <el-icon v-else color="red"><Close /></el-icon>
                </template>
            </el-table-column>
            <el-table-column prop="version" label="集群规模" align="center" width="100" sortable></el-table-column>
            <el-table-column fixed="right" label="操作" align="center">
                <template #default="scope">
                    <el-button :disabled="scope.row.status != 'Active'" link type="primary" size="small" @click="editCluster(scope.row)">编辑</el-button>
                    <el-button  link type="warning" size="small" @click="deleteItem(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
    <el-dialog 
    destroy-on-close 
    @close="closeDialog" 
    v-model="addUserDialog" 
    :title="defaultMethod=='Create'?'添加集群':'更新集群'"
    width="500">
        <Add :user-form="userForm" :method="defaultMethod" @rollback="rollback()"></Add>
    </el-dialog>
</template>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.text {
    font-size: 14px;
}
.item {
    margin-bottom: 18px;
}
</style>